<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出库记录</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>

<body>
    <div id="app">
        <!--导航切换-->
        <div class=".p-30">
              
            <el-form :model="check" ref="verification" label-width="5px">
              <el-row type="flex" class="wrap">
                    <el-form-item prop="name" label-width="30px">
                        <el-input v-model="check.name" placeholder="请输入物资名称" style="width:150px"></el-input>

                    </el-form-item>

                    <el-form-item prop="goods_id">

                        <!-- <el-select v-model="check.goods_id" placeholder="请选择分类名称" style="width:150px"
                            @change="ChangeGoods">
                            <el-option v-for="(item, index) in goodsdata" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select> -->


                           <el-cascader
                              v-model="check.goods_id"
                              placeholder="请选择分类名称"
                             :options="goodsdata"
							 :props="{label:'name',value:'id'}"
                            >

                              </el-cascader>




                    </el-form-item>



                    <el-form-item prop="add_name">
                        <el-select v-model="check.add_name" placeholder="请选择出库类型" style="width:150px">
                            <el-option v-for="(value, key, index) in get_warehouse_type" :key="index" :label="value"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="applicant">
                        <el-date-picker style="width:190px" v-model="check.start_time" type="date" placeholder="开始时间"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item prop="applicant">
                        <el-date-picker style="width:190px" v-model="check.ent_time" type="date" placeholder="结束时间"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item class="left_a">
                        <el-button type="primary" @click="searchput('formInline')" size="medium">搜&ensp;&ensp;索
                        </el-button>
                        <el-button @click="resetForm('verification')" size="medium">重&ensp;&ensp;置</el-button>
                        <el-button type="primary" icon="el-icon-tickets" @click="warehousing" size="small"
                            style="height:36px">入&ensp;&ensp;库</el-button>
                        <el-button type="primary" icon="el-icon-tickets" @click="outbound_page" size="small"
                            style="height:36px">出&ensp;&ensp;库 </el-button>
                        <el-button type="primary" icon="el-icon-download" @click="downloadExcel" size="small"
                            style="height:36px">导&ensp;&ensp;出</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="main" style="width: 95%;" v-loading="loading">

                <el-table border :data="information" :default-sort="{ prop: 'updated_at', order: 'descending' }">
                    <el-table-column label="出库单号" align='center' prop="order" width='200'>
                    </el-table-column>
                    <el-table-column label="出库时间" sortable prop="updated_at" align='center' width="160">
                    </el-table-column>

                    <el-table-column label="物资名称" prop="material_list.name" align='center' width="160">
                        <template slot-scope={row}>
                            <template v-if="row.warehouse_outbound_detail.length">
                                <template v-for="(item,i) in row['warehouse_outbound_detail']">
                                    <span v-text="item.stock.material_list.name"></span>
                                    <el-divider v-if="i == row['warehouse_outbound_detail'].length - 1 ? false : true">
                                    </el-divider>
                                </template>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column label="物资分类" align='center' prop="goods.name" width="160">
                        <template slot-scope={row}>
                            <template v-if="row.warehouse_outbound_detail.length">
                                <template v-for="(item,i) in row['warehouse_outbound_detail']">
                                    <span v-text="item.stock.goods.name"></span>
                                    <el-divider v-if="i == row['warehouse_outbound_detail'].length - 1 ? false : true">
                                    </el-divider>
                                </template>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column label="所属单位（人）" align='center' prop="checkcategory.name" width="160">
                        <template slot-scope={row}>
                            <template v-if="row.warehouse_outbound_detail.length">
                                <template v-for="(item,i) in row['warehouse_outbound_detail']">
                                    <span v-if="item.stock.checkcategory !== null"
                                        v-text="item.stock.checkcategory.name"></span>
                                    <span v-if="item.stock.checkcategory == null" v-text="have"></span>
                                    <el-divider v-if="i == row['warehouse_outbound_detail'].length - 1 ? false : true">
                                    </el-divider>
                                </template>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column label="出库数量" align='center' width="160">
                        <template slot-scope={row}>
                            <template v-if="row.warehouse_outbound_detail.length">
                                <template v-for="(item,i) in row['warehouse_outbound_detail']">
                                    <span v-text="item.number"></span>
                                    <el-divider v-if="i == row['warehouse_outbound_detail'].length - 1 ? false : true">
                                    </el-divider>
                                </template>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column label="出库类型" align='center' width="160">
                        <template slot-scope={row}>
                            <template>
                                <template v-for="(item,i) in {row}">
                                    <span v-if="item.type == 1">领用出库</span>
                                    <span v-if="item.type == 2">盘点出库</span>
                                    <span v-if="item.type == 3">报废出库</span>
                                </template>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column label="出库事由" prop="cause" align='center' width="160">
                    </el-table-column>

                    <el-table-column label="申请人" prop="users.name" align='center' width="160">
                    </el-table-column>

                    <el-table-column label="操&ensp;&ensp;作" width="250" align='center' fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="handleClick(scope.row)" size="small" style="margin:5px 0">
                                修&ensp;&ensp;改
                            </el-button>
                            <el-button type="primary" @click.native.prevent="getorderdata(scope.$index, scope.row)"
                                size="small">出库单</el-button>
                            <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)"
                                size="small">删&ensp;&ensp;除</el-button>
                        </template>
                    </el-table-column>

                </el-table>



            </div>
            <!-- 出库单 -->
            <el-dialog :title="title" :visible.sync="dialogFormVisible" width="80%" :append-to-body="true">
                <el-row type="flex" class="row-bg" justify="space-between">
                    <h3>北宅街道应急物资入库单</h3>
                    <el-row>
                        <el-button type="primary" @click="downloadExcel2()"><span
                                style="display:block;color:#fff;text-decoration:none">导&ensp;&ensp;出</a></el-button>
                    </el-row>
                </el-row><br>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
                    <tr class="trstyle">
                        <td><b>入库时间</b></td>
                        <td>@{{listone.created_at}}</td>
                        <td><b>入库类别</b></td>
                        <td>
                            <span v-if="type == 1">领用出库</span>
                            <span v-if="type == 2">盘点出库</span>
                            <span v-if="type == 3">报废出库</span>
                        </td>
                        <td><b>经手人</b></td>
                        <td>@{{users_name}}</td>
                        <td><b>入库单号</b></td>
                        <td>@{{listone.order}}</td>
                    </tr>
                    <tr>
                        <td colspan="8">
                            <h3 style="margin:10px 0;text-align:center;line-height:60px">物资明细</h3>
                            <el-table :data="warehouse_materials_one" border style="width: 100%">
                                <el-table-column prop="stock.goods.name" label="类&ensp;&ensp;别" sortable width=""
                                    align='center'> </el-table-column>
                                <el-table-column label="序&ensp;&ensp;号" width="80" type='index' align='center'>
                                </el-table-column>
                                <el-table-column prop="stock.material_list.name" label="物资名称" width="" align='center'>
                                </el-table-column>
                                <el-table-column prop="number" label="数&ensp;&ensp;量" width="" align='center'>
                                </el-table-column>
                                <el-table-column prop="stock.unit" label="单&ensp;&ensp;位" width="" align='center'>
                                </el-table-column>
                                <el-table-column prop="stock.norms" label="规&ensp;&ensp;格" width="" align='center'>
                                </el-table-column>
                                <el-table-column prop="stock.checkcategory.name" label="所属单位" width="" align='center'>
                                </el-table-column>
                                <el-table-column prop="stock.company.comName" label="单位名称" align='center'>
                                </el-table-column>
                                <el-table-column prop="seat" label="具体位置" align='center'> </el-table-column>
                                <el-table-column prop="remarks" label="备&ensp;&ensp;注" width="" align='center'>
                                </el-table-column>
                            </el-table>
                            <br><br><br>
                        </td>
                    </tr>
                    <tr class="trstyle trstyle2">
                        <td>经办人签字</td>
                        <td colspan="3" class="tbimg"><img :src="listone.applicant_sign"></td>
                        <td>领导签字</td>
                        <td colspan="3">&nbsp;</td>
                    </tr>
                </table>
            </el-dialog>
        </div>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </div>
    </div>
    </div>
    </div>
    <script src="/css/exam/js/vue.js"></script>
    <script src="/css/elementui/index.js"></script>
    <script src="/css/exam/js/axios.min.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                have: '无',
                loading: false,
                oneid: '',
                outbound: [],
                url: '',
                file_name: '',
                printurl: '',
                listone: [],
                type: [],
                users_name: [],
                dialogVisible: false,
                dialogFormVisible: false, //弹窗
                warehouse_materials_one: [],
                title: '',
                check: {
                    name: '',
                    goods_id: '',
                    add_name: '',
                    start_time: '',
                    ent_time: ''
                },
                information: [],
                outbound_type: [],
                list_data: [],
                goodsdata: [], //分类名称
                materialList: [], //物资名称
                get_warehouse_type: [], //出库类型

                currentPage: 1, // 当前页码
                count: 30, // 总条数
                pageSize: 10, // 每页的数据条数



            }
        },
        created() {
            this.getdata()
            // this.getgoodsdata()
            this.wuzifenlei()
        },

        methods: {
            // 带参数跳转到详情页面
            handleClick(row) {
                console.log(row);
                localStorage.setItem("list", JSON.stringify(row))

                localStorage.setItem("outbound_type", row.type)
                localStorage.setItem("cause", row.cause)
                localStorage.setItem("applicant", row.users.name)
                window.location.href = `/admin/warehouse/outboundadd?id=${row.id}`

            },

            // sets(row){
            //   console.log(row);
            //   localStorage.setItem('ids', row.id);
            //   window.open("{{ route('admin.warehouse.outboundadd') }}")    
            // },
            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.getdatalist()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getdatalist()
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.check.goods_id = ''
                this.check.add_name = ''
                this.check.start_time = ''
                this.check.ent_time = ''
                this.getdata()

            },
            //搜索
            async getdata() {
         
            var a = this.check.goods_id.toString()

            let array = a.split(',')

            let last = array[array.length-1]

            console.log(last,'last');
           
                this.loading = true
                let param = {
                    name: this.check.name,
                    goods_id: last,
                    type: this.check.add_name,
                    start_created_at: this.check.start_time,
                    end_created_at: this.check.ent_time,
                    limit: this.pageSize,
                    page: this.currentPage,

                }
                let res = await axios.post('/admin/warehouseOutbound/listData', param)
                this.information = res.data.data.list
                this.count = res.data.data.count
                this.get_warehouse_type = res.data.data.get_warehouse_type;
                this.loading = false


            },

            // 搜索事件         
            searchput() {
                this.currentPage = 1;
                this.getdata()
            },
            //获取物资分类
            // getgoodsdata() {
            //     let vm = this
            //     axios.post('/admin/goods/goods_all')
            //         .then(response => {
            //             vm.goodsdata = response.data.data;
            //         }).catch(error => {
            //             console.log('请求失败：' + error);
            //         })
            // },

                async wuzifenlei(){
                let res = await axios.post('/admin/goods/goodslistdata')
                this.goodsdata = res.data.data.list
                console.log('res11111111111', this.goodsdata);





            },





            //获取物资名称
            // async ChangeGoods(val) {
            //     let res = await axios.post('/admin/materialList/material_all', {
            //         goods_id: val
            //     })
            //     this.materialList = res.data.data

            // },
            //按物资分类统计列表
            getdatalist() {


            },
            // 删除列表行
            deleteRow(index, rows) {
                this.$confirm('确定要删除吗?', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',

                    })
                    .then(() => {
                        axios.post('/admin/warehouseOutbound/outbound_del', {
                                id: rows.id
                            })
                            .then(response => {
                                console.log('response', rows.id);
                                this.getdata()
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            }).catch(error => {
                                console.log('请求失败：' + error);
                            })
                    })
            },

            //获取物资出库单
            getorderdata(index, rows) {
                this.dialogFormVisible = true
                let id = rows.id
                this.oneid = id
                axios.post('/admin/warehouseOutbound/outboundOrderData', {
                        id: id
                    })
                    .then(res => {
                        console.log('res', res.data.data.outbound.warehouse_outbound_detail)
                        this.warehouse_materials_one = res.data.data.outbound.warehouse_outbound_detail
                        this.listone = res.data.data.outbound
                        this.users_name = this.listone.users.name
                        this.type = this.listone.type

                    }).catch(error => {
                        console.log('请求失败：' + error);
                    })
            },
            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.getdata()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getdata()
            },
            //跳到入库页
            warehousing() {

                window.location.href = "/admin/warehouse/referweb"

            },
            //跳到出库页
            outbound_page() {

                window.location.href = "/admin/warehouse/outboundadd"

            },
            //导出文件
            downloadExcel() {
                axios.post('/admin/warehouseOutbound/exportone', {
                        name: this.check.goods_id,
                        goods_id: this.check.name,
                        type: this.check.add_name,
                        start_created_at: this.check.start_time,
                        end_created_at: this.check.ent_time
                    })
                    .then((res) => {
                        let url = res.data.url
                        let file_name = res.data.file_name
                        console.log('file_name', file_name);
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.setAttribute = file_name;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link)
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            //导出
            downloadExcel2() {
                let id = this.oneid
                axios.post('/admin/warehouseOutbound/outbound_import', {
                        id: id
                    })
                    .then((res) => {
                        if (res.data.code == 408) {
                            this.$message(res.data.message)
                        }
                        let url = res.data.data
                        let file_name = res.data.data.slice('-19')
                        console.log('file_name', file_name);
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.setAttribute = file_name;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link)
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },

        },

    })
    </script>
    <style scoped>
    .el-table .el-table__cell:first-child {
        text-align: center;
    }

    .el-divider {
        margin: 0;
    }

    .bline {
        border-bottom: 1px solid #EBEEF5
    }

    .bline:last-child {
        border-bottom: 0 solid #EBEEF5
    }

    .tablestyle {
        border: 1px solid #EBEEF5;
    }

    .trstyle td {
        border: 1px solid #EBEEF5;
    }

    .trstyle td {
        line-height: 30px;
        padding: 10px
    }

    .trstyle2 td {
        line-height: 60px;
    }

    .main {
        padding: 0px 30px;
    }

    el-form {
        padding: 0px 10px;
    }

    .tbimg img {
        max-height: 90px;
        line-height: 16px;
    }
   .wrap{
        flex-wrap: wrap;
   }
   .left_a{
    margin-left:25px;
   }
    </style>
</body>

</html>